import React, { Component } from 'react';
// import logo from './logo.svg';
import './blog/bootstrap.min.css'
import './App.css';
import BlogForm from './blog/BlogForm';
import Blog from './blog/Blog';
import BlogButton from './blog/BlogButton';
import Methods from './until/Store';
import { DatePicker, Table } from 'antd';

var namespace = 'my-custom-blog'
const DEFAULT_SHOWTYPE = 'all_blog'
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      blogs: Methods.store(namespace),
      showType: DEFAULT_SHOWTYPE,
      currentBlogs: Methods.store(namespace)
    }
    console.log("初始化的数据是"+ JSON.stringify(this.state.blogs));
  }

  handleAdd = (obj) => {
    this.state.blogs.push(obj)
    Methods.store(namespace, this.state.blogs)
    this.setState({
      blogs: Methods.store(namespace),
      showType: DEFAULT_SHOWTYPE
    })
  }

  handleToggleStatusButton = (status = DEFAULT_SHOWTYPE) => {
    this.setState({
      showType: status
    })
  }

trOnClickToToggle = (source, newBlog = source) =>{
  // let blogs = Methods.store(namespace)
  let blogs = this.state.blogs
  let index = blogs.indexOf(source)
  newBlog.status = !source.status
  blogs.splice(index,1,newBlog)
  Methods.store(namespace, blogs)
  this.setState({
    blogs: blogs
  })
}

  render(){
    // console.log('this.handleToggleStatusButton()是'+ this.handleToggleStatusButton());
    console.log('re-render');
    return this.renderNormal()
  }

  renderNormal(){
    let blogs = this.state.blogs
    let status = this.state.showType
    switch (status) {
      case 'finished_blog':
        blogs = blogs.filter(item => item.status === false)
        break;
      case 'pending_blog':
        blogs = blogs.filter(item => item.status === true)
        break;
      default:
    }

    const columns = [
      {
        title: '标题',// 列表头部显示的文字
        dataIndex: 'title'
        // key: 'title'
      },
      {
        title: '内容',
        dataIndex: 'content'
        // key: 'content'
      },
      {
        title: '时间',
        dataIndex: 'created_at'
        // key: 'created_at'
      }
    ];

    return(
      <div>
        <BlogForm handleAdd={this.handleAdd} />
        <hr />
        <DatePicker />
        <hr />
        <BlogButton handleToggleStatusButton={this.handleToggleStatusButton} handleClearAll={this.handleClearAll}/>
        <Table columns={columns} dataSource={blogs} onRowClick={this.myOnRowClick} rowKey='uid' rowClassName={blog => blog.status ? '' : 'tr-hide'} />
      </div>
    )
  }

  //ant design table的行点击事件
  myOnRowClick = (record, index) => {
    console.log('record是'+ JSON.stringify(record) + 'index是'+ index);
      let source = record
      // let blog = this.props.item
      // blog.status = !blog.status
      this.trOnClickToToggle(source)
  }

  key = (blog) => {
    // return index
    console.log(blog);
  }

  handleClearAll =() => {
    localStorage.clear(namespace)
    this.setState({
      blogs: Methods.store(namespace)
    })
  }

  renderOfStatusBlos(){
    return(
      <div>
        <BlogForm handleAdd={this.handleAdd} />
        <hr />
        <hr />
        <BlogButton handleToggleStatusButton={this.handleToggleStatusButton} />
        <table className='table table-striped table-hover table-bordered'>
          <thead>
            <tr>
              <td>标题</td>
              <td>内容</td>
              <td>时间</td>
              <td>状态</td>
            </tr>
          </thead>
          <tbody>
            {
              this.handleToggleStatusButton().map((item,i)=>{
                return(
                  <Blog item={item} key={i} trOnClickToToggle={this.trOnClickToToggle}/>
                )
              })
            }
          </tbody>
        </table>
      </div>
    )
  }

}

export default App;



// OLD BOOTSTRAP TABLE
// <table className='table table-striped table-hover table-bordered'>
//   <thead>
//     <tr>
//       <td>标题</td>
//       <td>内容</td>
//       <td>时间</td>
//       <td>状态</td>
//     </tr>
//   </thead>
//   <tbody>
//     {
//       blogs.map((item,i)=>{
//         return(
//           <Blog item={item} key={i} status={item.status} trOnClickToToggle={this.trOnClickToToggle} />
//         )
//       })
//     }
//   </tbody>
// </table>
